<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TCP服务管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .log-container {
            height: 400px;
            overflow-y: auto;
            background-color: #f8f9fa;
            padding: 10px;
            font-family: monospace;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h2>TCP服务管理</h2>
        
        <!-- 配置管理 -->
        <div class="card mb-4">
            <div class="card-header">
                配置管理
            </div>
            <div class="card-body">
                <form id="configForm">
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="enableForward" {{if .enable_forward}}checked{{end}}>
                            <label class="form-check-label" for="enableForward">启用消息转发</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="targetHost" class="form-label">目标服务器地址</label>
                        <input type="text" class="form-control" id="targetHost" value="{{.target_host}}">
                    </div>
                    <div class="mb-3">
                        <label for="targetPort" class="form-label">目标服务器端口</label>
                        <input type="text" class="form-control" id="targetPort" value="{{.target_port}}">
                    </div>
                    <button type="submit" class="btn btn-primary">保存配置</button>
                </form>
            </div>
        </div>

        <!-- 日志查看 -->
        <div class="card mb-4">
            <div class="card-header">
                日志查看
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <select class="form-select" id="logFile">
                        <option value="">选择日志文件</option>
                    </select>
                </div>
                <div class="log-container" id="logContent"></div>
            </div>
        </div>

        <!-- 服务器控制 -->
        <div class="card mb-4">
            <div class="card-header">
                服务器控制
            </div>
            <div class="card-body">
                <button class="btn btn-warning me-2" onclick="controlServer('restart')">重启服务</button>
                <button class="btn btn-danger" onclick="controlServer('stop')">停止服务</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 加载日志文件列表
        function loadLogFiles() {
            fetch('/api/logs')
                .then(response => response.json())
                .then(data => {
                    const select = document.getElementById('logFile');
                    select.innerHTML = '<option value="">选择日志文件</option>';
                    data.files.forEach(file => {
                        const option = document.createElement('option');
                        option.value = file;
                        option.textContent = file;
                        select.appendChild(option);
                    });
                });
        }

        // 加载日志内容
        function loadLogContent(filename) {
            if (!filename) return;
            fetch(`/api/logs/${filename}`)
                .then(response => response.text())
                .then(content => {
                    document.getElementById('logContent').textContent = content;
                });
        }

        // 保存配置
        document.getElementById('configForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const config = {
                enable_forward: document.getElementById('enableForward').checked,
                target_host: document.getElementById('targetHost').value,
                target_port: document.getElementById('targetPort').value
            };

            fetch('/api/config', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(config)
            })
            .then(response => response.json())
            .then(data => {
                alert('配置已保存');
            })
            .catch(error => {
                alert('保存配置失败: ' + error);
            });
        });

        // 服务器控制
        function controlServer(action) {
            if (!confirm(`确定要${action === 'restart' ? '重启' : '停止'}服务器吗？`)) {
                return;
            }

            fetch(`/api/control/${action}`, {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                alert('操作已执行');
            })
            .catch(error => {
                alert('操作失败: ' + error);
            });
        }

        // 监听日志文件选择
        document.getElementById('logFile').addEventListener('change', function(e) {
            loadLogContent(e.target.value);
        });

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            loadLogFiles();
            // 每30秒刷新一次日志文件列表
            setInterval(loadLogFiles, 30000);
        });
    </script>
</body>
</html> 